<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        ul, ol, li {
          list-style: none;
        }
    
        .banner {
          width: 600px;
          height: 400px;
          border: 10px solid #333;
          margin: 30px auto;
          position: relative;
        }
    
        .banner > ul {
          width: 100%;
          height: 100%;
          position: relative;
        }
    
        .banner > ul > li {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 100px;
          background-color: pink;
          opacity: 0;
          transition: opacity 1s;
        }
    
        .banner > ul > li.active {
          opacity: 1;
        }
    
        .banner > ol {
          height: 30px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          background-color: rgba(0, 0, 0, .4);
          border-radius: 15px;
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
        }
    
        .banner > ol > li {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #fff;
          cursor: pointer;
          margin: 0 6px;
        }
    
        .banner > ol > li.active {
          background-color: purple;
        }
    
        .banner > .leftRight {
          width: 100%;
          height: 40px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          justify-content: space-between;
        }
    
        .banner > .leftRight > span {
          width: 20px;
          height: 100%;
          background-color: rgba(0, 0, 0, .4);
          color: #fff;
          font-size: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
      </style>
</head>
<body>
    <div class="banner" id="banner">
        <!-- 约定： ul 是内容 - box -->
        <ul class="imgBox">
          <li style="background-color: red;">1</li>
          <li style="background-color: orange;">2</li>
          <li style="background-color: green;">3</li>
          <li style="background-color: skyblue;">4</li>
          <li style="background-color: yellow;">5</li>
          <li style="background-color: blue;">6</li>
        </ul>
    
        <!-- 约定：ol 是 翻页 - point -->
        <ol class="pointBox"></ol>
    
        <!-- 约定 - class 名为 leftRight 是 左右 按钮 -->
        <div class="leftRight">
          <span class="left">&lt;</span>
          <span class="right">&gt;</span>
        </div>
      </div>
</body>
</html>
<script type="module">
    class Banner {
        constructor(banner){
            this.banner = typeof(banner)==="string" ? document.querySelector("#banner") : banner;
            this.ulLis = this.banner.querySelectorAll(".imgBox>li");
            
            this.contentIndex = 0;

            this.autoplay();

            this.mouseEvent();

            this.leftRight_click();

            this.olLisEvent();

            this.render();

        }
        //控制内容的切换
        render(){
            this.ulLis.forEach(e=>e.className = "")
            this.ulLis[this.contentIndex].className = "active";

            this.olLis.forEach(e=>e.className = "")
            this.olLis[this.contentIndex].className = "active";

            this.olLis.forEach(e=>{e.style.backgroundColor = "white"});
            this.olLis[this.contentIndex].style.backgroundColor = this.ulLis[this.contentIndex].style.backgroundColor
        }
        //autoplay
        autoplay(){
            this.intervalId = setInterval(()=>{
                this.contentIndex++;
                if(this.contentIndex==this.ulLis.length){
                    this.contentIndex = 0;
                }
                this.render();
            },1000)
        }
        //mouseEvent 鼠标移入停止轮播，移出开始
        mouseEvent(){
            this.banner.addEventListener("mouseenter",()=>{
                clearInterval(this.intervalId);
            })
            this.banner.addEventListener("mouseleave",()=>{
                this.autoplay();
            })
        }
        //leftRight_click 左右点击事件
        leftRight_click(){
            this.left = this.banner.querySelector(".left");
            this.left.addEventListener("click",()=>{
                this.contentIndex--;
                if(this.contentIndex < 0){
                    this.contentIndex =this.ulLis.length-1;
                }
                this.render();
            })
            this.right = this.banner.querySelector(".right");
            this.right.addEventListener("click",()=>{
                this.contentIndex++;
                if(this.contentIndex == this.ulLis.length){
                    this.contentIndex = 0;
                }
                this.render();
            })
        }
        //olLisEvent
        olLisEvent(){
            //根据内容数量生成li
            this.pointBox = this.banner.querySelector(".pointBox");
            this.ulLis.forEach((item,index)=>{
                this.olLi = document.createElement("li");
                this.pointBox.append(this.olLi);
            })
            //olLis点击事件
            this.olLis = this.banner.querySelectorAll(".pointBox > li");
            this.olLis.forEach((item,index)=>{
                item.addEventListener("click",e=>{
                    this.contentIndex = index;
                    this.render();
                })
            })
        }   
    }
    new Banner("#banner");
</script>